<template>
  <div class="wrapper capa-card">
    <el-alert
      v-if="statusData.status === '2'"
      :title="statusData.opinion"
      type="error"
    >
    </el-alert>
    <div class="rule_title">
      <span class="title-l"> <i class="icon_left"></i>纠正与预防措施 </span>
    </div>
    <div class="form-container">
      <el-form
        label-position="right"
        :model="ruleForm"
        class="comp-form"
        label-width="150px"
        :inline="true"
        :rules="rules"
        ref="ruleForm"
        :disabled="disable"
      >
        <el-row>
          <el-form-item
            label="细节调查/分析过程"
            prop="analytical_process_content"
          >
            <el-input
              type="textarea"
              v-model="ruleForm.analytical_process_content"
              placeholder="请输入细节调查/分析过程"
            ></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="真实原因" prop="real_reason">
            <!-- <el-checkbox-group v-model="ruleForm.real_reason">
                            <el-checkbox label="1">原因1</el-checkbox>
                            <el-checkbox label="2">原因2</el-checkbox>
                            <el-checkbox label="3">原因3</el-checkbox>
                            <el-checkbox label="4">原因4</el-checkbox>
                        </el-checkbox-group> -->
            <el-select
              style="width: 878px"
              v-model="ruleForm.real_reason"
              multiple
              filterable
              allow-create
              default-first-option
              placeholder="请选择真实原因"
            >
              <el-option
                v-for="item in reasonOptions"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="纠正措施" prop="corrective_action">
            <el-input
              type="textarea"
              v-model="ruleForm.corrective_action"
              placeholder="请输入纠正措施"
            ></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="纠正措施执行人" prop="corrective_user_id">
            <!-- <el-input v-model="ruleForm.corrective_user_id" placeholder="请输入纠正措施执行人"></el-input> -->
            <el-select
              style="width: 160px"
              v-model="ruleForm.corrective_user_id"
              filterable
              clearable
            >
              <el-option
                v-for="handler in staffData"
                :key="handler.id"
                :label="handler.name"
                :value="handler.id + ''"
              />
            </el-select>
          </el-form-item>

          <el-form-item
            label="纠正计划完成时间"
            prop="corrective_plan_time"
            label-width="130px"
          >
            <el-date-picker
              v-model="ruleForm.corrective_plan_time"
              type="datetime"
              placeholder="选择日期时间"
              value-format="timestamp"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item
            label="纠正完成时间"
            prop="corrective_complete_time"
            label-width="130px"
          >
            <el-date-picker
              v-model="ruleForm.corrective_complete_time"
              type="datetime"
              placeholder="选择日期时间"
              value-format="timestamp"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item label="预防措施" prop="prevent_action">
            <el-input
              type="textarea"
              v-model="ruleForm.prevent_action"
              placeholder="请输入预防措施"
            ></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="预防措施执行人" prop="prevent_user_id">
            <!-- <el-input v-model="ruleForm.prevent_user_id" placeholder="请输入预防措施执行人"></el-input> -->
            <el-select
              style="width: 160px"
              v-model="ruleForm.prevent_user_id"
              filterable
              clearable
            >
              <el-option
                v-for="handler in staffData"
                :key="handler.id"
                :label="handler.name"
                :value="handler.id + ''"
              />
            </el-select>
          </el-form-item>

          <el-form-item
            label="预防计划完成时间"
            prop="prevent_plan_time"
            label-width="130px"
          >
            <el-date-picker
              v-model="ruleForm.prevent_plan_time"
              type="datetime"
              placeholder="选择日期时间"
              value-format="timestamp"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            label="预防完成时间"
            prop="prevent_complete_time"
            label-width="130px"
          >
            <el-date-picker
              v-model="ruleForm.prevent_complete_time"
              type="datetime"
              placeholder="选择日期时间"
              value-format="timestamp"
            >
            </el-date-picker>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <div class="operation-footer" v-if="mode !== 'detail'">
      <div class="footer-wrap">
        <el-button size="small" @click="handleClickClose">关闭</el-button>
        <el-button size="small" type="primary" @click="handleClickSubmit('0')"
          >保存草稿</el-button
        >
        <el-button size="small" type="primary" @click="handleClickSubmit('1')"
          >提交</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { CapaCorrectPrevent, AdminListByCustomer } from "@/api/qms";
import { timestamp10 } from "@/utils/mUtils";
import { AdminBox } from "@/api/customer";

export default {
  name: "measure",
  components: {},
  props: ["detailData", "mode", "statusData"],
  data() {
    return {
      ruleForm: {
        analytical_process_content: "", // 细节调查/分析过程
        real_reason: [], // 多个原因类型
        corrective_action: "", // 纠正措施
        corrective_user_id: "", // 纠正措施执行人
        corrective_plan_time: "", // 纠正计划完成时间
        corrective_complete_time: "", // 纠正完成时间
        prevent_action: "", // 预防措施
        prevent_user_id: "", // 预防措施执行人
        prevent_plan_time: "", // 预防计划完成时间
        prevent_complete_time: "", // 预防完成时间
      },
      rules: {},
      staffData: [],
      branchData: [],
      reasonOptions: [
        "没有遵守sop",
        "操作失误",
        "缺乏培训",
        "第三方问题",
        "包装问题",
        "中转库问题",
        "其他",
      ],
    };
  },
  mounted() {
    this.ruleForm.id = this.$route.query.id || "3";
    AdminBox({
      user_type: "0",
    }).then((res) => {
      this.staffData = res.data;
    });
  },
  computed: {
    disable() {
      return this.mode === "detail";
    },
  },
  watch: {
    detailData: {
      handler(newValue, oldValue) {
        if (this.detailData) {
          // console.log('11111111111111====================');
          this.getDetail();
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    getDetail() {
      const data = JSON.parse(JSON.stringify(this.detailData));
      data.corrective_plan_time = data.corrective_plan_time * 1000 || "";
      data.corrective_complete_time =
        data.corrective_complete_time * 1000 || "";
      data.prevent_plan_time = data.prevent_plan_time * 1000 || "";
      data.prevent_complete_time = data.prevent_complete_time * 1000 || "";
      data.occur_duty_department_time =
        data.occur_duty_department_time * 1000 || "";
      data.corrective_user_id =
        data.corrective_user_id === "0" ? "" : data.corrective_user_id;
      data.prevent_user_id =
        data.prevent_user_id === "0" ? "" : data.prevent_user_id;
      this.ruleForm = data;
    },
    handleClickClose() {
      this.$router.go(-1);
    },

    handleClickSubmit(is_initiated) {
      const _ruleForm = {
        ...this.ruleForm,
        corrective_plan_time: timestamp10(this.ruleForm.corrective_plan_time),
        corrective_complete_time: timestamp10(
          this.ruleForm.corrective_complete_time
        ),
        prevent_plan_time: timestamp10(this.ruleForm.prevent_plan_time),
        prevent_complete_time: timestamp10(this.ruleForm.prevent_complete_time),
        duty_leader_area_id: this.ruleForm.duty_leader_area_id + "",
        quality_control_area_id: this.ruleForm.quality_control_area_id + "",
        is_initiated: is_initiated,
      };

      CapaCorrectPrevent(_ruleForm).then((res) => {
        if (res.code === 10000) {
          if (is_initiated === "0") {
            this.$message({
              message: "保存草稿成功",
              type: "success",
            });
            let text = this.$router.resolve({
              name: "capaEdit",
              query: {
                id: res.data.id,
                mode: "edit",
              },
            });
            location.replace(text.href);
          } else {
            this.$message({
              message: "提交成功",
              type: "success",
            });
            setTimeout(() => {
              this.$router.push({
                name: "capaList",
              });
            }, 200);
          }
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
  .rule_title {
    // background: red;
    display: flex;
    align-items: center;
    padding-bottom: 18px;
    padding-top: 8px;
    font-size: 14px;
    font-weight: bold;
    justify-content: space-between;

    .title-l {
      display: flex;
      align-items: center;
    }

    .icon_left {
      display: inline-block;
      width: 6px;
      height: 16px;
      background: #f1a357;
      margin-right: 6px;
    }

    .icon-right {
    }
  }

  .range_tab {
    width: 100%;
    height: 30px;
    background: #f2f3f5;
    font-weight: bold;
    line-height: 30px;
    padding-left: 12px;
    margin-bottom: 16px;
    color: #6d6e72;
    font-size: 14px;
  }

  .comp-form {
    .el-input {
      width: 200px;
    }

    .el-select,
    .el-cascader,
    .el-radio-group {
      width: 200px;
    }

    .el-textarea {
      width: 878px;
    }

    /deep/ .el-form-item {
      margin-right: 30px !important;
    }
  }
}
</style>